<template>
  <div class="bar">
    <div class="right">
    </div>
    <div class="title">{{ plugin.t('menu.template') }}</div>
  </div>
  <div class="plugin-config-template">
    <div class="box">
      <div class="left-box" style="width: 270px">
        <t-menu class="menu" theme="light" v-model="menu" width="250px">
          <t-menu-item value="erp_print">
            <template #icon>
              <t-icon name="file" />
            </template>
            {{ plugin.t('template.erp_print') }}
          </t-menu-item>
          <t-menu-item value="erp_print_refund">
            <template #icon>
              <t-icon name="file-unknown" />
            </template>
            {{ plugin.t('template.erp_print_refund') }}
          </t-menu-item>
          <t-menu-item value="erp_ticket">
            <template #icon>
              <t-icon name="file-paste" />
            </template>
            {{ plugin.t('template.erp_ticket') }}
          </t-menu-item>
          <t-menu-item value="erp_ticket_refund">
            <template #icon>
              <t-icon name="file-unknown" />
            </template>
            {{ plugin.t('template.erp_ticket_refund') }}
          </t-menu-item>
          <t-menu-item value="erp_expect">
            <template #icon>
              <t-icon name="root-list" />
            </template>
            {{ plugin.t('template.erp_expect') }}
          </t-menu-item>
          <t-menu-item value="erp_delivery">
            <template #icon>
              <t-icon name="undertake-delivery" />
            </template>
            {{ plugin.t('template.erp_delivery') }}
          </t-menu-item>
        </t-menu>
      </div>
      <div class="box">
        <t-loading :loading="loading" :showOverlay="false">
          <t-row :gutter="20">
            <t-col v-for="(item, index) in data[menu]" :key="item.id"  :sm="6" :md="4" :lg="3" :xxl="2">
              <div class="item" :class="{ on: templateStore.has(item) }" @click="onSubmit(item, index)">
                <img class="flash" :src="app.img(item.image)" />
                <span class="flash wrap">{{ item.name }}</span>
                <i v-if="templateStore.hasUpdate(item)">{{ plugin.t('template.update') }}</i>
              </div>
            </t-col>
          </t-row>
        </t-loading>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import index from '../../index'
  import templateStore from '../../store/template'

  const plugin = index.plugin
  const menu = ref('erp_ticket')
  const data = templateStore.store

  // 提交配置
  const loading = ref(false)
  const onSubmit = (data, index) => {
    app.router.push({ 
      path: '/plugin/config/template/form', 
      query: { keyword: data.keyword, index: index } 
    })
  }

  // 加载配置
  const getData = () => {
    loading.value = true
    templateStore.get().finally(() => {
      templateStore.getStore().finally(() => {
        loading.value = false
      })
    })
  }
  
  getData()
</script>
<style lang="scss">
  @import '@/style/global';

  .plugin-config-template{
    .menu{
      background: 0;
      .t-default-menu__inner .t-menu{
        padding: 0
      }
      .t-menu__item.t-is-active:not(.t-is-opened){
        background-color: var(--td-brand-color-2)
      }
    }

    .title{
      font-size: 16px;
      font-weight: bold; 
      padding-bottom: 20px;
    }

    .item{
      padding-bottom: 45px;
      cursor: pointer;
      font-size: 14px;
      text-align: center;
      position: relative;

      &.on{
        img{
          border-color: $color;
        }
      }

      &:hover{
        img{
          box-shadow: 0 8px 15px rgba(0, 0, 0, .1);
        }
      }

      span{
        line-height: 20px;
        padding: 10px 20px 10px;
        color: $color-title;
        display:block;
      }

      img{
        height: 200px;
        display:block;
        margin: 0 auto;
        box-shadow: 0 5px 10px rgba(0, 0, 0, .05);
        border: 3px #fff solid;
        border-radius: 6px;
        overflow: hidden;
      }

      i{
        border:1px $color dashed;
        color: $color;
        font-style: normal;
        border-radius: 3px;
        padding: 2px 5px;
        font-size: 12px;
      }
    }
  }
</style>